<template>
  <el-button type="text" size="mini" :disabled="downdisabled" @click.stop="handleSeriesSortDown()">
    <el-icon>
      <sort-down />
    </el-icon>
  </el-button>
  <el-button type="text" size="mini" :disabled="updisabled" @click.stop="handleSeriesSortUp()" style="margin-left:-2px;">
    <el-icon>
      <sort-up />
    </el-icon>
  </el-button>
</template>

<script>
  import {resortSeries} from "@/api/series/series";

  export default {
    name: "SeriesResort",
    props: {
      row: {
        type: Object,
        required: true
      },
      updisabled: {
        type: Boolean,
        default: false
      },
      downdisabled: {
        type: Boolean,
        default: false
      }
    },
    emits: ['reloadSeries'],
    setup(props, context) {
      const reloadSeriesList = () => {
        context.emit('reloadSeries')
      }
      const handleSeriesSortDown = () => {
        resortSeries({mediaid: props.row.mediaid, seriesid: props.row.seriesid, action: 'down'}).then(response => {
          if (response.errcode == 0) {
            reloadSeriesList()
          }
        })
      }
      const handleSeriesSortUp = () => {
        resortSeries({mediaid: props.row.mediaid, seriesid: props.row.seriesid, action: 'up'}).then(response => {
          if (response.errcode == 0) {
            reloadSeriesList()
          }
        })
      }
      return {
        handleSeriesSortUp,
        handleSeriesSortDown
      }
    }
  }
</script>

<style scoped>

</style>
